import React, { useState, useMemo, DOMAttributes } from "react";

export default function Memo() {
  const [num, setNum] = useState(9999);
  const [name, setName] = useState("小米")
  const [color, setColor] = useState("red");

  const InputColorStyle = useMemo(() => {
    return <div>值： {num + name}</div>
    // Array.from({ length: num }, (_, i) => {
    //   return <li key={i}>{i}</li>
    // }
  }, [name] );

  return (
    <div>
      <input type="text" name="" id="" value={color} onInput={(e) => {
        setColor(e.currentTarget.value)
        setNum(Math.random() + num)
      }} />
      <button 
        onClick={() => {
          setNum(Math.random() + num)
          setName('test')
        }}
      >
        改变 值
      </button>
      <p style={{ color }}>颜色</p>
      <ExpensiveTree />
      {InputColorStyle}
    </div>
  );
}

function ExpensiveTree() {
  let now = performance.now();
  while (performance.now() - now < 100) {
    // Artificial delay -- do nothing for 100ms
  }
  return <p>I am a very slow component tree.</p>;
}
